<template>
	<view class="paidDetail">
		<navBar isBack backColor="#fff" title="订单详情" color="#fff" background="transprant"></navBar>
		<view class="topImg">
			<image :src="`${baseImg}/static/adminShop/detailBack.png`" mode=""></image>
			<!-- time -->
			<view class="time">
				<view class="title">
					<image :src="`${baseImg}/static/adminShop/detailWait.png`" mode=""></image>
					{{order_status[order_info.order_status]}}
				</view>
				<!-- <view class="onlyTime">还剩 23:38:53 自动关闭订单</view> -->
			</view>
			<!-- 用户信息 -->
			<view class="userInfo" v-if="order_info.move_way!=2">
				<view class="infoItem">
					<view class="left">
						<image :src="`${baseImg}/static/adminShop/detailAddress.png`" mode=""></image>
						<view class="call">
							<view class="info">
								{{order_info.name}} {{order_info.mobile}} <span @click="toTelPhone">联系Ta</span>
							</view>
							<view class="address">
								{{address_all}}
							</view>
						</view>
					</view>
					<view class="right">
						<image :src="`${baseImg}/static/adminShop/detailEdit.png`" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="content" :style="'margin-top:'+navHeight+'rpx;'" :class="{'contentActive':order_info.move_way==2}">
			<!-- 商品清单 -->
			<view class="shopList">
				<h3>商品清单</h3>
				<!-- 按订单 -->
				<view class="box" v-show="order_info.product_lst.length">
					<view class="list">
						<view class="item" v-for="(item,index) in order_info.product_lst" :key="index">
							<image :src="item.main_imgurl" mode=""></image>
							<view class="shopInfo">
								<view class="top">
									<view class="tit omit-2">
										{{item.product_title}}
									</view>
									¥ {{item.price}}
								</view>
								<view class="spec">
									<view class="specItem">
										<span v-for="(item1,index1) in item.attr_params" :key="index1">{{item1.value}}</span>
									</view>
									<span>x{{item.num}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 按包裹 -->
				<!-- 未发货 -->
				<view class="box" v-show="order_info.wait_send_data.length">
					<!-- 包裹信息 -->
					<view class="packageInfo">
						<view class="num packageActive">未发货</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in order_info.wait_send_data" :key="index">
							<image :src="item.main_imgurl" mode=""></image>
							<view class="shopInfo">
								<view class="top">
									<view class="tit omit-2">
										{{item.product_title}}
									</view>
									¥ {{item.price}}
								</view>
								<view class="spec">
									<view class="specItem">
										<span v-for="(item1,index1) in item.attr_params" :key="index1">{{item1.value}}</span>
									</view>
									<span>x{{item.num}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 已发货 -->
				<view class="box" v-show="order_info.send_data.length">
					<!-- 包裹信息 -->
					<view v-for="(item,index) in order_info.send_data" :key="index">
						<view class="packageInfo">
							<view class="num">{{item.send_name}}</view>
							<view class="info">
								<view class="code">
									{{item.express_name}} | {{item.courier_num}}
									<image :src="`${baseImg}/static/adminShop/copy.png`" mode=""></image>
								</view>
								<view class="time">
									发货时间 | {{$moment(item.send_time*1000).format('yyyy-MM-DD HH:mm:ss')}}
								</view>
							</view>
						</view>
						<view class="list">
							<view class="item" v-for="(item1,index1) in item.list" :key="index1">
								<image :src="item1.main_imgurl" mode=""></image>
								<view class="shopInfo">
									<view class="top">
										<view class="tit omit-2">
											{{item1.product_title}}
										</view>
										¥ {{item1.price}}
									</view>
									<view class="spec">
										<view class="specItem">
											<span v-for="(item2,index2) in item1.attr_params" :key="index2">{{item2.value}}</span>
										</view>
										<span>x{{item1.num}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 价钱 -->
				<view class="price">
					<view class="all">
						总价<span>¥ {{order_info.price}}</span>
					</view>
					<view class="all">
						运费<span>¥ {{order_info.move_price}}</span>
					</view>
					<view class="need" v-if="order_info.is_many_way!=0">
						已付定金<span>¥ {{order_info.deposit_price}}</span>
					</view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="orderInfo">
				<h3>订单信息</h3>
				<view class="top">
					<view class="item">
						订单编号<view class="txt">{{order_info.order_code}}<span @click="copyBtn">复制</span></view>
					</view>
					<view class="item">
						支付状态<view class="txt">{{order_info.pay_type==1?'微信支付':order_info.pay_type==2?'支付宝':order_info.pay_type==3?'余额支付':'线下支付'}}</view>
					</view>
					<view class="item" v-if="order_info.buy_type==2">
						拼团状态<view class="txt">{{groupStatus[order_info.pintuan_status]}}</view>
					</view>
					<view class="item">
						配送方式<view class="txt">{{order_info.move_way==1?'快递':'自提'}}</view>
					</view>
				</view>
				<view class="bottom">
					下单时间<span>{{$moment(order_info.create_time*1000).format('yyyy-MM-DD HH:mm:ss')}}</span>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn">
			<!-- <view class="btn_item" @click="toTelPhone">联系买家</view> -->
			<view class="btn_item active" @click="toTips" >{{groupStatus[order_info.pintuan_status]}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseImg:this.$static,
				navHeight:200,
				order_id:null, //订单id
				order_info:{},
				address_all:'',
				groupStatus:{
					1:'拼团中',
					2:'拼团成功',
					3:'拼团失败'
				},
				order_status: {
					1: "待付款",
					2: "待发货",
					3: "待收货",
					4: "已完成",
					5: "已关闭"
				},
			}
		},
		onLoad(options) {
			this.navHeight = 468 - (Number(this.$store.state.system.navBarHeight)*2)
			this.order_id = options.order_id
			this.getOrderDetail()
		},
		methods:{
			// 获取订单详情
			getOrderDetail(){
				let params = {
					order_id:this.order_id
				}
				this.$api.getPackOrderDetail(params).then(res=>{
					console.log(res,'订单详情')
					if(res.code==1){
						this.order_info = res.data?res.data:{},
						this.address_all = res.data.province+res.data.city+res.data.area+res.data.address
					}
				})
			},
			// 跳转到确认发货
			toDeliver(){
				uni.navigateTo({
					url:'deliverSet?order_id='+this.order_id
				})
			},
			//提示
			toTips(){
				uni.showToast({
					title:'正在拼团中',
					icon:'none',
					duration:3000
				})
			},
			// 复制按钮
			copyBtn(){
				uni.setClipboardData({
				    data: this.order_info.order_code,
				    success: function () {
						console.log('复制成功')
				    }
				});
			},
			
			// 联系打电话
			toTelPhone(){
				console.log(this.order_info.mobile,'电话电话')
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: this.order_info.mobile, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.paidDetail{
		width: 100%;
		.topImg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 468rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.time{
				padding: 0 44rpx;
				position: absolute;
				bottom: 146rpx;
				left: 0;
				color: #fff;
				.title{
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;
					image{margin-right: 16rpx;width: 40rpx;height: 40rpx;border-radius: 50%;}
					font: 500 36rpx/36rpx PingFang SC;
				}
				.onlyTime{font: 400 22rpx/36rpx PingFang SC;}
			}
			// 用户信息
			.userInfo{
				width: 100%;
				position: absolute;
				left: 0;
				bottom: -102rpx;
				.infoItem{
					padding: 28rpx 24rpx;
					display: flex;
					justify-content: space-between;
					margin: 0 auto;
					width: 702rpx;
					height: 188rpx;
					background-color: #fff;
					border-radius: 16rpx;
					image{width: 40rpx;height: 40rpx;}
					.left{
						display: flex;
						.call{
							margin:0 20rpx 0 24rpx;
							display: flex;
							flex-direction: column;
							.info{
								margin-bottom: 20rpx;
								display: flex;
								color: #0A0605;
								font: 500 26rpx/40rpx PingFang SC;
								span{
									margin-left: 16rpx;
									padding: 0rpx 12rpx;
									border-radius: 18rpx;
									background-color: #F5F6F6;
									font: 400 18rpx/40rpx PingFang SC;
								}
							}
							.address{
								color: #505050;
								font: 400 26rpx/40rpx PingFang SC;
							}
						}
					}
				}
			}
		}
		
		// 内容
		.content{
			padding: 126rpx 24rpx 0;
			margin-bottom: 116rpx;			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			// 商品清单
			.shopList{
				background-color: #fff;
				padding: 28rpx;
				// padding-bottom: 0;
				border-radius: 16rpx;
				h3{
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
				}
				.box{
					padding-top: 28rpx;
					border-bottom: 2rpx solid #F5F5F5;
				}
				// 包裹信息
				.packageInfo{
					margin:10rpx 0 32rpx 0;
					display: flex;
					justify-content: space-between;
					// 已发货
					.num{
						height: 36rpx;
						padding: 0rpx 8rpx;
						font: 400 22rpx/36rpx PingFang SC;
						color: #fff;
						background-color: #E7AD14;
						border-radius: 4rpx;
					}
					// 未发货
					.packageActive{
						background: #E5675A;
					}
					.info{
						font: 400 22rpx/20rpx PingFang SC;
						color: #A0A0A0;
						.code{
							width: 376rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							image{
								width: 32rpx;
								height: 32rpx;
							}
							margin-bottom: 8rpx;
						}
					}
				}
				
				.list{
					.item{
						display: flex;
						margin-bottom: 32rpx;
						image{
							width: 148rpx;
							height: 148rpx;
							border-radius: 8rpx;
						}
						.shopInfo{
							width: 478rpx;
							margin-left: 24rpx;
							display: flex;
							flex-direction: column;
							.top{
								color: #505050;
								font: 400 26rpx/40rpx PingFang SC;
								.tit{
									width: 328rpx;
								}
								display: flex;
								justify-content: space-between;
							}
							.spec{
								display: flex;
								justify-content: space-between;
								margin-top: 40rpx;
								color: #A0A0A0;
								font: 400 22rpx/22rpx PingFang SC;
							}
						}
					}
				}
				// 价钱
				.price{
					padding-top: 32rpx;
					view{
						display: flex;
						justify-content: space-between;
					}
					.all{
						font: 400 26rpx/40rpx PingFang SC;
						color: #505050;
					}
					.need{
						font: 500 26rpx/40rpx PingFang SC;
						color: #0A0605;
						span{
							color: #DBA954;
						}
					}
				}
			}
			// 订单信息
			.orderInfo{
				margin-top: 24rpx;
				background-color: #fff;
				padding: 28rpx;
				border-radius: 16rpx;
				h3{
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
				}
				.top{
					padding: 28rpx 0 0;
					margin-bottom: 24rpx;
					border-bottom: 2rpx solid #f5f5f5;
					.item{
						font: 400 26rpx/40rpx PingFang SC;
						color: #A0A0A0;
						display: flex;
						margin-bottom: 24rpx;
						align-items: center;
						.txt{
							display: flex;
							color: #505050;
							margin-left: 32rpx;
							span{
								margin-left: 18rpx;
								padding: 0 14rpx;
								border-radius: 18rpx;
								color: #DBA954;
								font: 400 18rpx/40rpx PingFang SC;
								background-color: rgba(219,169,84,0.1);
							}
						}
					}
				}
				.bottom{
					font: 400 26rpx/40rpx PingFang SC;
					color: #A0A0A0;
					display: flex;
					align-items: center;
					span{
						margin-left: 32rpx;
						color: #505050;
					}
				}
			}
		}
		.contentActive{
			padding-top: 30rpx;
		}
		
		// 按钮
		.btn{
			width: 100%;
			height: 92rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: flex-end;
			padding: 0 24rpx;
			height: calc(92rpx+ constant(safe-area-inset-bottom));			height: calc(92rpx + env(safe-area-inset-bottom));			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			.btn_item{
				width: 154rpx;
				height: 56rpx;
				border-radius: 28rpx;
				border: 2rpx solid #505050;
				font: 400 24rpx/56rpx PingFang SC;
				color: #505050;
				text-align: center;
				margin:18rpx 0 18rpx 20rpx;
			}
			.active{
				border-color: #DBA954;
				color: #fff;
				background-color: #DBA954;
			}
		}
	}
</style>
